阿里巴巴矢量图标库

阿里巴巴的字体图标库可选择的样式很多，我们时常需要用到，我来梳理一下使用步骤。

浏览器搜索 iconfont , 进入 iconfont 官网 附图:

直达链接

1. 搜索你想要的图标 附图 : 2. 选择(多个)你想要的图标, 点击第一个 添加入库 , 即可在右上角购物车样式的 库 中查看已经添加的图标 附图 : 3. 点击右上角购物车样式的 库 之后, 点击 添加至项目 附图 : 4. 新增一个项目(名称随便起), 点击 确定 附图 : 5. 选择第二个 fontclass 后, 点击 暂无代码,点此生成 附图 : 6. 点击 点此复制代码 附图 : 7. 在浏览器中新建一个页面, 在网址中粘贴进去, 即可得到我们需要的图标样式代码 . 复制网页中显示的全部的具体样式代码 附图 :

1. 在项目中新建 iconfont.css 文件 , 把网页中显示的具体样式代码原封不动地粘贴进去 附图 : 注 : 我们可以在 .iconfont 中自定义字体图标的样式属性 :

2. 在项目中导入 iconfont.css 文件(可在 main.js中导入一次; 也可在具体模块中导入) , 路径因个人项目结构而定, 别写错了 附图 : 3. 在要用到字体图标的地方, 在对应标签上加 class 属性 , 属性名有两个 , 分别是: 阿里巴巴图标库名 iconfont (红色箭头指向处) 和 库中具体的字体图标名 (绿色箭头指向处) 附图 : 到此, 阿里巴巴字体图标 已经可以在 vue项目中使用 !

说得很啰嗦。大家可以下看 官方的使用说明 。你会觉得还是我讲得详细 ! 直达链接